<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-card>
          <el-row>
            <el-col :span="12" :offset="6">
              <el-autocomplete
                style="width: 100%"
                v-model="state"
                :fetch-suggestions="querySearch"
                popper-class="my-autocomplete"
                placeholder="商标名 / 注册号 / ID"
                @select="handleSelect"
              >
                <template #suffix>
                  <el-button type="primary" @click="handleIconClick"
                    >搜索</el-button
                  >
                </template>
                <template #default="{ item }">
                  <div class="value">{{ item.value }}</div>
                  <span class="link">{{ item.link }}</span>
                </template>
              </el-autocomplete>
            </el-col>
          </el-row>
        </el-card>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="18" :offset="2">
            <el-form :model="form" label-width="auto">
              <el-form-item label="主体类型">
                <el-checkbox-group v-model="typeList">
                  <el-checkbox
                    v-for="item in entity_types"
                    :label="item.name"
                    :key="item.name"
                    :value="item.name"
                  />
                </el-checkbox-group>
              </el-form-item>
              <!-- <el-form-item label="Activity time">
                <el-col :span="11">
                  <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
                </el-col>
                <el-col :span="2" class="text-center">
                  <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                  <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
                </el-col>
              </el-form-item> -->
              <el-form-item label="商标类别">
                <el-checkbox-group v-model="cateList">
                  <el-checkbox
                    v-for="item in sb_category"
                    :label="item.number + '-' + item.name"
                    :key="item.name"
                    :value="item.name"
                  />
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { loadEntityTypes, loadSBCategory } from "@/api/user";
import { onMounted, reactive, ref } from "vue";

interface LinkItem {
  value: string;
  link: string;
  name: string;
  number: string;
}

const state = ref("");
const links = ref<LinkItem[]>([]);
const entity_types = ref<LinkItem[]>([]);
const sb_category = ref<LinkItem[]>([]);

const typeList = ref([]);
const cateList = ref([]);

const querySearch = (queryString: string, cb) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value;
  // call callback function to return suggestion objects
  cb(results);
};
const createFilter = queryString => {
  return restaurant => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

const handleSelect = (item: LinkItem) => {
  console.log(item);
};

const handleIconClick = (ev: Event) => {
  console.log(ev);
};

onMounted(() => {
  // links.value = loadAll();
  loadEntityTypes().then((res: any) => {
    if (res.code === 200) {
      entity_types.value = res.data;
    }
  });
  loadSBCategory().then((res: any) => {
    if (res.code === 200) {
      sb_category.value = res.data;
    }
  });
});
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: ""
});

const onSubmit = () => {
  console.log("submit!");
};
</script>

<style lang="scss" scoped>
.my-autocomplete li {
  line-height: normal;
  padding: 7px;
}

.my-autocomplete li .name {
  text-overflow: ellipsis;
  overflow: hidden;
}

::v-deep .el-button {
  // height: 48px;
  width: 70px;
}

::v-deep .el-input {
  // height: 50px !important;
}

::v-deep .el-input__wrapper {
  padding: 1px 0px 1px 11px;
}

.my-autocomplete li .addr {
  font-size: 12px;
  color: #b4b4b4;
}

.my-autocomplete li .highlighted .addr {
  color: #ddd;
}
</style>
